<template>
    <div class="view-event">
        <div v-if="mapList.length">
            <el-select style="width: 220px;" v-model="currentComponent" value-key="id" @change="(item) => { setInstanceList(item, item.data); }" size="mini" placeholder="请选择">
                <el-option v-for="item in mapList" :key="item.id" :label="item.component" :value="item" @mouseenter.native="item.attribute.highlight = true;" @mouseleave.native="item.attribute.highlight = false;"></el-option>
            </el-select>
            <div class="map-content" v-if="currentComponent && currentComponent.component == 'CloudMap'">
                <div class="main-text-tran-50">
                    <span>实例</span>
                </div>
                <div class="table">
                    <div class="label" :class="item.id === activeInstanceid ? 'activeTable': ''" v-for="(item, index) in instanceList" :key="index" @click="setInstance(item)">
                        <span>{{ item.project }}</span>
                    </div>
                </div>
            </div>
            <div class="map-content" v-if="currentComponent && currentComponent.component == 'CloudMap'">
                <div class="main-text-tran-50">
                    <span>导览</span>
                </div>
                <div class="table">
                    <div class="label" :class="item.id === activeViewid ? 'activeTable': ''" v-for="(item, index) in viewList" :key="index" @click="activeViewid = index">
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
            <div class="map-content" v-if="currentComponent && currentComponent.component == 'Holo3dMap'">
                <div class="main-text-tran-50">
                    <span>导览</span>
                </div>
                <div class="table">
                    <div class="label" :class="item.id === activeViewid ? 'activeTable': ''" v-for="(item, index) in viewList" :key="index" @click="activeViewid = item.id">
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-title" v-else>
            暂无地图数据
        </div>
    </div>
</template>

<script>
import bus from '@/js/event/bus.js';
import store from '@/js/store/state.js';
// import cloudMap from '@/js/main/attribute/cloudMap.js';
import util from '@/js/util/util.js';
// import component from '@/js/main/component.js';

export default {
    props: {
        eventData: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            // component: component,
            mapList: store.getElementList().filter((item) => item.component === 'CloudMap' || item.component === 'Holo3dMap'),
            instanceList: [],
            viewList: [],
            activeInstanceid: '',
            activeViewid: -1,
            currentComponent: null
        };
    },
    mounted() {
        bus.on('getEventData', this.getEventData);
        this.$nextTick(() => {
            if (this.eventData.length > 0 && this.eventData[0].event === 'view') {
                this.setEventData(this.eventData[0]);
            }
        });
    },
    destroyed() {
        bus.off('getEventData', this.getEventData);
    },
    methods: {
        getEventData() {
            let param = null;
            let list = [];
            if (!this.currentComponent) {
                list.push('没有选择地图组件！');
            }
            if (this.currentComponent && this.currentComponent.component === 'CloudMap' && !this.activeInstanceid) {
                list.push('没有选择地图实例！');
            }
            if (this.currentComponent && (this.currentComponent.component === 'CloudMap' || this.currentComponent.component === 'Holo3dMap') && this.activeViewid === -1) {
                list.push('没有选择地图导览！');
            }
            if (list.length == 0) {
                if (this.currentComponent.component === 'CloudMap') {
                    param = {
                        element: this.currentComponent.id, // 组件id
                        nodeIP: this.currentComponent.data.nodeIP, // 实例服务ip
                        playerPort: this.currentComponent.data.playerPort, // 视频流端口
                        id: this.activeInstanceid, // 实例id
                        projectId: this.currentComponent.data.projectId, // 工程id
                        viewid: this.activeViewid // 导览序列
                    };
                } else if (this.currentComponent.component === 'Holo3dMap') {
                    param = {
                        element: this.currentComponent.id,
                        viewid: this.activeViewid
                    };
                }
                if (param) {
                    param.component = this.currentComponent.component;
                }
                return param;
            } else {
                return {
                    error: true,
                    message: list
                };
            }
        },
        setEventData(event) {
            this.activeInstanceid = event.param.id;
            this.activeViewid = event.param.viewid;
            this.currentComponent = this.mapList.filter((item) => item.id === event.param.elementID)[0];
            this.setInstanceList(this.currentComponent, event.param);
        },
        // 修改时param不为null;
        async setInstanceList(component, param) {
            if (component.component == 'CloudMap') {
                if (util.isNotBlank(component.data.url)) {
                    let data = await socket(url, [
                        {
                            command: 100,
                            details: true
                        },
                        {
                            command: 0
                        }
                    ]);
                    let command = JSON.parse(data[0].data);
                    let server = JSON.parse(data[1].data);
                    let instances = command.instances;
                    let list = new Array();
                    if (instances) {
                        for (let a = 0; a < instances.length; a++) {
                            let instance = {
                                nodeIP: instances[a].nodeIP,
                                id: instances[a].id,
                                playerPort: server.playerPort,
                                projectId: instances[a].projectId,
                                project: instances[a].project,
                                tours: instances[a].tours,
                                viewid: -1
                            };
                            list.push(instance);
                        }
                    }
                    this.instanceList = list;
                    this.activeInstanceid = param.id;
                    this.activeViewid = param.viewid;
                    let instanceList = this.instanceList.filter((item) => item.id === param.id);
                    if (instanceList.length) {
                        let viewList = instanceList[0].tours;
                        let list = [];
                        if (viewList) {
                            for (let a = 0; a < viewList.length; a++) {
                                let rs = {};
                                rs.name = viewList[a];
                                rs.id = a;
                                list.push(rs);
                            }
                        }
                        this.viewList = list;
                        if (param.viewid >= viewList.length) {
                            this.activeViewid = -1;
                        }
                    } else {
                        this.viewList = [];
                        this.activeInstanceid = '';
                        this.activeViewid = -1;
                    }
                }
            } else if (component.component == 'Holo3dMap') {
                this.viewList = component.data.view;
            }
        },
        setInstance(row) {
            if (this.activeInstanceid != row.id) {
                this.viewList = [];
                this.activeInstanceid = row.id;
                let instanceObject = this.instanceList.filter((item) => item.id === row.id)[0];
                let viewList = instanceObject.tours;
                let list = [];
                if (viewList) {
                    for (let a = 0; a < viewList.length; a++) {
                        let rs = {};
                        rs.name = viewList[a];
                        rs.id = a;
                        list.push(rs);
                    }
                }
                this.viewList = list;
                this.activeViewid = -1;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.view-event {
    height: 100%;
}
.map-content {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.main-text-tran-50 {
    font-weight: 600;
    line-height: 30px;
    min-width: 40px;
}
.page-title {
    display: flex;
    height: 65px;
    justify-content: center;
    align-items: center;
    color: #ffffffff;
    font-size: 12px;
}
.table {
    width: 100%;
    min-height: 50px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 10px;
    .activeTable {
        background: #3664ec !important;
    }
    .label {
        width: calc(100% - 10px);
        height: 25px;
        line-height: 25px;
        margin: 3px 2px;
        border-radius: 2px;
        padding-left: 8px;
        cursor: pointer;
        span {
            color: #ffffff;
        }
        &:active {
            background: #3664ec;
        }
        &:hover {
            background: #2d2d2d;
        }
    }
}
</style>